<template>
  <div class="luck_wrap">
    <div
      class="lottery-wrapper zam-app-flex-ajCenter2 hidden"
      @click="closeDialog"
    >
      <div class="alllottery-wrapper" v-show="peopleShowType">
        <div class="lottery-left" v-if="dataOption.peopleSwitch">
          <div class="left-main">
            <div class="left-head">
              <div class="prev" @click="prevWin" v-show="awardIndex != 0"></div>
              <div class="left-award" v-if="lotteryActivity.items">
                {{ textFilter(lotteryActivity.items) }}
              </div>
              <div
                class="next"
                @click="nextWin"
                v-show="awardIndex < awardOptions.length - 1"
              ></div>
            </div>
            <div class="left-prizeimg">
              <div class="prizeimg">
                <span class="lottery-win">{{ rollLen }}</span>
              </div>

              <div class="left-prizeaward">
                <div class="left-prizename">已获奖人数</div>
              </div>
            </div>
            <div class="prize_box">
              <div class="prize_number first_number">
                <div class="prize_number_l">中奖人数</div>
                <div class="prize_number_r prize_refresh">
                  <span class="prize_number_box">{{ maxNum }}人</span>
                </div>
              </div>
              <div class="prize_number">
                <div class="prize_number_l">抽奖参与人数</div>
                <div class="prize_number_r prize_refresh">
                  <span class="prize_number_box">{{
                    lotteryActivity.count
                  }}</span>
                  <img
                    id="prize_increment"
                    src="../../assets/images/activity/refresh.png"
                    class="prize_number_refresh prize_number_btn"
                    @click="refreshPeople"
                  />
                </div>
              </div>
              <div class="prize_number">
                <div class="prize_number_l">每次抽取人数</div>
                <div class="prize_number_r">
                  <img
                    id="prize_decrement"
                    src="../../assets/images/activity/decrement.png"
                    class="prize_number_btn"
                    @click="number_reduce"
                  />
                  <span class="prize_number_box">{{ maxTimes }}</span>
                  <img
                    id="prize_increment"
                    src="../../assets/images/activity/increment.png"
                    class="prize_number_btn"
                    @click="number_add"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="lottery-right_wrap">
          <div
            class="lottery-title"
            :class="dataOption.peopleSwitch ? '' : 'lottery-title_spread'"
          >
            <div class="title-left">
              {{ lotteryActivity.activityName }}
            </div>
          </div>
          <div
            class="lottery-right"
            :class="dataOption.peopleSwitch ? '' : 'lottery-spread'"
          >
            <div
              :class="
                dataOption.peopleSwitch ? 'right-reward-box' : 'pop_up_box'
              "
              style="width: '80%'"
            >
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide"
                    v-for="(swiper, index) in dataOption.swiperOption"
                    :key="index"
                  >
                    <!-- <div :class="dataOption.peopleSwitch ? '' : 'pop_up_swiper-slide_all'"> -->
                    <div
                      :class="
                        dataOption.peopleSwitch ? '' : 'pop_up_swiper-slide_all'
                      "
                    >
                      <div
                        class="right-luckeravatar right-lucker"
                        v-for="(user, key) in swiper"
                        :class="swiper.length == 1 ? 'right-one' : ''"
                        :key="key"
                      >
                        <img
                          :src="user.avatar"
                          :onerror="musicPlay.defaultImg"
                        />
                        <!-- https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64 -->
                        <!-- <div class="right-luckerdel">
		        <i class="zam-icon-error2"></i>
		      </div> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right-reward-foot">
              <div class="start-btn" @click="startBtn"></div>
            </div>
          </div>
        </div>
      </div>

      <peoples-how
        v-if="!peopleShowType"
        @SonStartLotteryBtn="startBtn"
        :myswiperOption="dataOption.swiperOption"
        :peopleTitle="lotteryActivity.activityName"
      ></peoples-how>
      <div class="lottery-btn">
        <div class="navbar-btn" @click="toggleMusicState">
          <img
            src="../../assets/images/activity/music-play.png"
            v-if="musicPlay.musicState"
          />
          <img src="../../assets/images/activity/music-mute.png" v-else />
        </div>
        <div class="navbar-btn" @click.stop="lotteryRoll">
          <img src="../../assets/images/activity/win-list.png" />
        </div>
        <div class="navbar-btn" @click="peopleSwitch">
          <img
            src="../../assets/images/activity/people-show.png"
            v-if="dataOption.peopleSwitch"
          />
           <img src="../../assets/images/activity/people-hide.png" v-else />
        </div>
      </div>
      <audio
        ref="musicAudio"
        controls="controls"
        loop="loop"
        preload="auto"
        class="audio_show"
      >
        <!---->
        <!-- https://wdd.js.org/element-audio/static/falling-star.mp3 -->
        <source :src="musicPlay.musicSource" type="audio/mpeg" />
        您的浏览器不支持 audio 标签。
      </audio>
      <prizewinner
        :lotteryLuckers="winnerData"
        :winprizeData="winPrize"
        :source="dataOption.lotterySource"
        v-if="dataOption.winPrizeSwitch"
        @closePrize="closePrizeDialog"
      ></prizewinner>
    </div>
    <div class="lottery-footer">
      <div class="footer-text">页面技术由 轶善在线 提供技术支持</div>
    </div>

    <div class="lottery-overlay" v-if="dataOption.chooseSwitch">
      <div class="lottery-userBox">
        <div class="right-reward-box lottery-userBox-wrapper">
          <div
            v-for="(list, index) in rollIdArr"
            :key="index"
            :class="rollIdArr.length > 5 ? 'luck-more' : 'right-lucker'"
          >
            <div class="lottery-userBox-avatar frotate">
              <img :src="list.avatar" :onerror="musicPlay.defaultImg" />
              <i class="zam-icon-error2"></i>
            </div>
          </div>
        </div>
        <div class="lottery-stop-btn" @click="stopRoll"></div>
      </div>
    </div>
  </div>
</template>

<script>
import prizewinner from "./dialog/prizewinner";
import peopleShow from "./dialog/peopleShow";
import { Toast, Popup, Dialog } from "vant";
import {
  getLuckyUsers,
  getActivityInfo,
  getLotteryUsers,
  screenLottery,
  getLotteryItemById,
} from "@/api/lottery";
import Swiper from "swiper";
export default {
  name: "lottery",
  data() {
    return {
      peopleShowType: true,
      setTimeObj: {
        BigScreen: null,
        PeopleBigScreen: null,
      },
      dataOption: {
        chooseSwitch: false,
        peopleSwitch: true,
        winPrizeSwitch: false,
        swiperOption: [],
        mySwiper: null,
        lotterySource: "winPrize",
        peopleTitle: "",
      },
      musicPlay: {
        musicState: false, // 音乐播放状态
        musicSource: require("@/assets/media/活动背景配乐.mp3"),
        defaultImg:
          'this.src="' +
          require("@/assets/images/activity/default_head.png") +
          '"',
      },
      lotteryActivity: {
        activityName: "",
        items: [],
      },
      winnerData: {},
      winPrize: {
        maxAwardTips: "",
        rollIdArr: [],
      },
      awardOptions: [], // 奖项
      userData: [], // 总用户集合
      rollIdArr: [], // 当前抽中集合
      maxAwardTips: "", // 本轮奖项名称
      awardIndex: 0,
      maxAward: "", // 本轮奖项类别
      maxNum: 1, // 本轮奖项总人数
      rollLen: 0, // 本轮已抽中用户数
      maxTimes: 1, // 单次最大抽取人数
      total: 0, // 累计所有抽中用户数
      isBegin: false, // 是否开始
      timeInterJS: null, // 滚动定时器对象
    };
  },

  components: {
    prizewinner: prizewinner,
    "peoples-how": peopleShow,
  },

  computed: {},
  created() {
    this.getInitActivity();
    sessionStorage.setItem("awardIndex", 0);
  },
  mounted() {
    // this.playMuisc();
    this.pollingActivity();
  },
  watch: {
    userData(oldVal, newVal) {
      if (oldVal.length != newVal.length) {
        this.swiperScroll();
      }
    },
    "lotteryActivity.items": {
      handler(newVal, oldVal) {
        this.editLeftNumber(oldVal, newVal);
      },
      deep: true,
    },
  },
  methods: {
    // 播放音频
    playMuisc() {
      this.$refs.musicAudio.play();
    },
    closeDialog() {
      // console.log("111");
      // this.dataOption.winPrizeSwitch = false;
    },
    closePrizeDialog() {
      this.dataOption.winPrizeSwitch = false;
      this.SwiperDiv();
    },
    textFilter(val) {
      if (!val.length) return;
      return val[this.awardIndex].awardsName;
    },
    editLeftNumber(oldData, newData) {
      this.getInitShow(newData);
    },
    getInitShow(awards, idIndex) {
      let index = sessionStorage.getItem("awardIndex");
      let awardIndex = index ? index : idIndex;
      this.awardIndex = awardIndex;
      this.awardOptions = awards;
      this.maxAward = awards[this.awardIndex].id;
      this.rollLen = awards[this.awardIndex].winnersNum;
      this.maxNum = awards[this.awardIndex].num;
      this.maxAwardTips = awards[this.awardIndex].awardsName;
    },
    //swiper滚动
    swiperScroll() {
      this.dataOption.swiperOption = [];
      // this.setTimeObj.BigScreen = setTimeout(() => {
      //996
      this.dataOption.swiperOption = this.regroupArray(this.userData, 5 * 10);
      // }, 500);
      this.SwiperDiv();
    },
    clearTime() {
      this.dataOption.mySwiper = null;
      // clearTimeout(this.setTimeObj.BigScreen);
      // clearTimeout(this.setTimeObj.PeopleBigScreen);
      // this.setTimeObj.BigScreen = null;
      // this.setTimeObj.PeopleBigScreen = null;
      this.SwiperDiv();
      //this.dataOption.mySwiper.slideTo(0); //切换到第一个slide，速度为1秒
    },
    // 轮询接口
    pollingActivity() {
      this.setTimePolling = setInterval(() => {
        this.getInitActivity();
      }, 5000);
      this.swiperScroll();
    },
    getInitActivity() {
      getActivityInfo({
        activityId: this.$route.query.activityId,
      }).then((res) => {
        if (res.code == 200000) {
          let lottery_storage = sessionStorage.getItem("lottery_storage");
          console.log(res.data.password);
          if (res.data.password != "" && res.data.password != null) {
            if (lottery_storage == null) {
              this.$router.replace({
                path: "/activity",
                query: {
                  activityId: this.$route.query.activityId,
                },
              });
            }
          } else {
            sessionStorage.removeItem("lottery_storage");
          }
          // this.getCallBack(res.data);
          this.userData = res.data.cjUsers;
          this.lotteryActivity = res.data;
        } else if (res.code == 330020) {
          this.$router.replace({
            path: "/activity",
            query: {
              activityId: this.$route.query.activityId,
            },
          });
          return;
        } else {
          Dialog.alert({
            width: "560px",
            message: res.msg,
          });
          clearInterval(this.setTimePolling);
        }
      });
    },
    getCallBack(data) {
      this.lotteryActivity = data;
      let joinPeople = data.cjUsers;
      this.userData = joinPeople;
      let awardIndex = sessionStorage.getItem("awardIndex")
        ? sessionStorage.getItem("awardIndex")
        : 0;
      this.getInitShow(this.lotteryActivity.items, awardIndex);
    },
    SwiperDiv() {
      let delayAutoPlay = this.userData.length > 50 ? 3000 : 0;
      this.dataOption.mySwiper = new Swiper(".swiper-container", {
        direction: "horizontal", // 垂直切换选项
        observer: true,
        observeParents: true,
        loop: true, // 循环模式选项
        autoplay: delayAutoPlay,
        autoplayDisableOnInteraction: false,
      });
    },
    // 开始抽奖
    startBtn() {
      this.beginRoll();
    },
    // 1.开始滚动
    beginRoll() {
      if (!this.isBegin) {
        // 1.0选择抽取奖项
        if (!this.maxAward) {
          Dialog.alert({
            width: "560px",
            message: "请选择相对应的奖项", //this.maxAwardTips
          });
          return false;
        }
        //本轮能抽多少 -- 已抽多少 --本轮剩下的抽取人数
        console.log(this.maxNum, this.rollLen, this.maxTimes);
        // 1.1本轮抽奖剩余人数
        const tempLast = this.maxNum - this.rollLen;
        // 1.1.0若小于单次最大抽奖人数
        if (!!tempLast && tempLast < this.maxTimes) {
          this.maxTimes = tempLast.toString();
        }
        // 1.1.1若已抽完
        if (tempLast === 0) {
          Dialog.alert({
            width: "560px",
            message: "本轮已抽取完毕",
          });
          return false;
        }
        // 1.2抽奖池内剩余人数
        // 当前已中奖人数
        this.total = 0;
        this.userData.map((item) => {
          if (item.Award != 0) {
            this.total++;
          }
        });
        console.log(this.userData.length, this.total, this.maxTimes);
        // 当前抽中剩余的人
        const tempRoll = this.userData.length - this.total;
        // 剩余人数小于等于本轮抽奖剩余人数
        if (tempRoll < this.maxTimes) {
          Dialog.alert({
            width: "560px",
            message: `池内剩余总数${tempRoll}，不够本次抽取${this.maxTimes}！`,
          });
          return false;
        }
        // 弹出抽奖弹窗
        this.dataOption.chooseSwitch = true;
        // 1.3定时器滚动
        this.isBegin = true;
        this.toggleMusic();
        this.timeInterJS = setInterval(this.roll, this.intervalTime);
      }
    },
    // 2.结束抽取
    stopRoll() {
      if (this.isBegin) {
        this.render();
      }
    },
    // 3.抽取结果
    render() {
      clearInterval(this.timeInterJS);
      // 3.0设置抽中人奖项并同步至indexDB
      this.rollIdArr.map((item) => {
        item.Award = this.maxAward;
      });
      // 3.1更新已抽中人数数目
      this.rollLen += Number(this.rollIdArr.length);
      // 3.3回传中奖数据
      // const temp = this.rollIdArr
      //   .map((item) => {
      //     return item.Num;
      //   })
      //   .join(",");
      console.log(this.rollLen, this.rollIdArr);
      this.dataOption.chooseSwitch = false;
      screenLottery({
        activityId: this.$route.query.activityId,
        awardsId: this.maxAward,
        num: this.maxTimes,
      })
        .then((res) => {
          //     // 3.4重置开关
          this.isBegin = false;
          this.toggleMusic();
          if (res.code == 200000) {
            this.dataOption.lotterySource = "winPrize";
            this.rollIdArr = res.data.luckyUsers;
            this.winPrize = {
              maxAwardTips: this.maxAwardTips,
              rollIdArr: this.rollIdArr,
            };
            this.lotteryActivity.count = res.data.count;
            this.dataOption.winPrizeSwitch = true;
            this.toggleMusic();
            //   this.refreshPeople();
          } else {
            Dialog.alert({
              width: "560px",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.isBegin = false;
          Dialog.alert({
            width: "560px",
            message: err,
          });
        });
    },
    // 4.滚动主要函数
    roll() {
      // 4.0先清空抽中集合数组
      this.rollIdArr = [];
      // 4.1更新抽中集合
      while (this.rollIdArr.length < this.maxTimes) {
        const rnd = this.getRand();
        const obj = this.userData[rnd];
        console.log(rnd, obj);
        if (obj.Award == 0 && !this.findInArr(this.rollIdArr, obj)) {
          this.rollIdArr.push(obj);
        }
      }
    },
    // 5.去除已抽取观众
    findInArr(arr, obj) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i]["CompleteID"] === obj.CompleteID) {
          return true;
        }
      }
      return false;
    },
    // 6.随机比例返回抽取结果
    getRand() {
      return Math.floor(Math.random() * this.userData.length);
    },
    // 7.修改单次抽取个数
    changeTimes(val) {
      const rnd = this.getRand();
      this.rollIdArr = this.userData.slice(rnd, rnd + Number(val));
    },
    // 8.修改奖项及本轮人数
    changeAward(val) {
      // 8.0重置本轮已抽取奖项人数
      // this.rollLen = 0;
      // 8.1本轮奖项总人数
      getLotteryItemById({
        itemId: val,
      }).then((res) => {
        if (res.code == 200000) {
          this.maxAward = res.data.id;
          this.maxNum = res.data.num;
          this.rollLen = res.data.winnersNum;
          this.maxAwardTips = res.data.awardsName;
          //如果 当前中奖总人数 小于每次抽奖人数 的话
          if (Number(this.maxNum) < Number(this.maxTimes)) {
            // this.maxTimes = this.maxNum;
            this.changeTimes(this.maxTimes);
          }
        } else {
          Dialog.alert({
            width: "560px",
            message: res.msg,
          });
        }
      });
      // this.awardOptions.map((item) => {
      //   if (item.id === val) {
      //     this.maxAward = item.id;
      //     this.maxNum = item.num ? item.num : 1;
      //     this.rollLen = item.winnersNum ? item.winnersNum : 0;
      //     this.maxAwardTips = item.awardsName;
      //     console.log(this.maxNum, this.maxTimes);
      //     // 8.1.1本轮总人数小于单次抽取人数
      //     if (Number(this.maxNum) < Number(this.maxTimes)) {
      //       this.maxTimes = this.maxNum;
      //       this.changeTimes(this.maxTimes);
      //     }
      //   }
      // });
      // 8.2单次可供抽取人数
      // this.timesOptions.map((item, index) => {
      //   if (Number(item.value) > Number(this.maxNum)) {
      //     item.disabled = true;
      //   } else {
      //     item.disabled = false;
      //   }
      // });
    },
    // 9.切换音乐播放状态
    toggleMusicState() {
      this.musicPlay.musicState = !this.musicPlay.musicState;
      // if (this.music.show) {
      let musicAudio = this.$refs.musicAudio;
      if (this.musicPlay.musicState) {
        musicAudio.play();
      } else {
        musicAudio.pause();
      }
    },
    //切换音乐
    toggleMusic() {
      var audio = this.$refs.musicAudio;
      if (this.isBegin) {
        this.musicPlay.musicSource = require("@/assets/media/抽奖的音效.mp3");
      } else {
        this.musicPlay.musicSource = require("@/assets/media/活动背景配乐.mp3");
      }
      if (!this.musicPlay.musicState) this.musicPlay.musicState = true;
      audio.load();
      audio.play();
    },
    // 重组数组
    regroupArray(arr, len) {
      let arr_length = arr.length;
      let newArr = [];
      for (let i = 0; i < arr_length; i += len) {
        newArr.push(arr.slice(i, i + len));
      }
      return newArr;
    },
    // 中奖名单
    lotteryRoll() {
      getLuckyUsers({
        activityId: this.$route.query.activityId,
      }).then((res) => {
        if (res.code == 200000) {
          this.winnerData = res.data;
          this.dataOption.lotterySource = "prize";
          this.dataOption.winPrizeSwitch = true;
        } else {
          Dialog.alert({
            width: "560px",
            message: res.msg,
          });
        }
      });
    },
    // 人数显示
    peopleSwitch() {
      this.clearTime();
      this.dataOption.swiperOption = [];
      // 人数显示
      this.dataOption.peopleSwitch = !this.dataOption.peopleSwitch;
      this.peopleShowType = !this.peopleShowType;

      if (this.dataOption.peopleSwitch) {
        console.log("----------------");
        // this.setTimeObj.BigScreen = setTimeout(() => {
        //996
        this.dataOption.swiperOption = this.regroupArray(this.userData, 5 * 10);
        // }, 500);
      } else {
        console.log("+++++++++++++");
        // this.setTimeObj.PeopleBigScreen = setTimeout(() => {
        //996
        this.dataOption.swiperOption = this.regroupArray(this.userData, 6 * 16);
        // }, 500);
      }
    },
    // 读取
    refreshPeople() {
      getLotteryUsers({
        activityId: this.$route.query.activityId,
      }).then((res) => {
        if (res.code == 200000) {
          this.lotteryActivity.count = res.data;
        } else {
          Dialog.alert({
            width: "560px",
            message: res.msg,
          });
        }
      });
    },
    prevWin() {
      this.awardIndex--;
      this.awardOptions;
      this.changeAward(this.awardOptions[this.awardIndex].id);
      sessionStorage.setItem("awardIndex", this.awardIndex);
    },
    nextWin() {
      console.log(this.awardIndex);
      this.awardIndex++;
      this.changeAward(this.awardOptions[this.awardIndex].id);
      sessionStorage.setItem("awardIndex", this.awardIndex);
    },
    number_reduce() {
      if (Number(this.maxTimes) <= 1) {
        Dialog.alert({
          width: "560px",
          message: "最少抽奖人数为1",
        });
        return;
      }
      this.maxTimes = Number(this.maxTimes) - 1;
      console.log("减少");
    },
    number_add() {
      console.log(this.maxTimes, this.maxNum, this.rollLen);
      // 中间人数 - 已抽中用户数
      let currSelectNum = Number(this.maxNum) - Number(this.rollLen);
      console.log(this.maxTimes, this.lotteryActivity.count);
      // 每次抽取人数 大于等于 中奖参与人数
      if (Number(this.maxTimes) >= Number(this.lotteryActivity.count)) {
        Dialog.alert({
          width: "560px",
          message: "每次抽取人数不能超过抽奖参与人数",
        });
        //每次抽取人数不能超过中奖人数
        return;
      }
      if (Number(this.maxTimes) >= Number(this.maxNum)) {
        Dialog.alert({
          width: "560px",
          message: "每次抽取人数不能超过中奖人数",
        });
        return;
      }
      // 每次抽取人数
      if (Number(this.maxTimes) >= currSelectNum) {
        Dialog.alert({
          width: "560px",
          message: "每次抽取人数不能超过剩余中奖人数",
        });
        return;
      }
      this.maxTimes = Number(this.maxTimes) + 1;
      // this.maxTimes = currSelectNum;
    },
  },
  beforeDestroy() {
    this.$refs.musicAudio.pause();
    if (this.setTimePolling) {
      clearInterval(this.setTimePolling); //关闭
    }
  },
};
</script>
<style src="./style.css"></style>
<style lang='less' scoped>
/deep/ .swiper-slide {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* justify-content: space-between; */
}

.luck_wrap {
  background: url("../../assets/images/activity/lockscreen.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;

  .alllottery-wrapper {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: flex;
  }
}
.lottery-right_wrap {
  position: relative;
  margin-left: 50px;
  height: 74%;
  width: 60%;
}
.lottery-right {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/activity/rightbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 16px;
  box-shadow: 7px 10px 40px #121212;
  position: relative;
}

.lottery-spread {
  width: 90%;
  margin: 0 auto;
}

/**抽奖主体样式**/
.lottery-wrapper {
  width: 95%;
  margin: 0 auto;
  height: 100%;
}

// .lottery-wrapper.hidden {
//   display: none !important;
// }
.lottery-wrapper .lottery-left {
  position: relative;
  height: 74%;
  width: 23%;
  margin-left: 5%;
  margin-top: 7.5%;
  background-image: url("../../assets/images/activity/leftbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 16px;
  box-shadow: 7px 10px 40px #121212;
}

.lottery-left {
  .left-head {
    display: flex;
    justify-content: center;
    width: 85%;
    margin: 0 auto;
  }

  .prev {
    width: 35px;
    height: 38px;
    cursor: pointer;
    background-image: url("https://sanrenxingvip.com/addons/meepo_xianchangv2/template/resource/images/screen/lottery/prev.png");
    background-repeat: no-repeat;
    background-size: cover;
  }

  .next {
    width: 35px;
    height: 38px;
    cursor: pointer;
    background-image: url("https://sanrenxingvip.com/addons/meepo_xianchangv2/template/resource/images/screen/lottery/next.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.left-main {
  margin-top: 50px;

  .first_number {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;

    .prize_number_box {
      color: #f9be65;
    }
  }
}

.lottery-left .left-prizeimg {
  height: 150px;
  text-align: center;
  margin-bottom: calc(100% - 20% - 150px);
  margin-top: 10%;
  position: relative;

  .prizeimg {
    width: 132px;
    height: 132px;
    margin: 0 28px;
    background: url("../../assets/images/activity/prizeimg.png") no-repeat;
    background-size: 100% 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 132px;
      height: 132px;
      border-radius: 4px;
    }
  }

  .lottery-win {
    font-size: 52px;
    font-weight: bold;
    color: #ffffff;
  }
}

.left-award {
  width: 240px;
  height: 54px;
  line-height: 54px;
  font-size: 22px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

.lottery-left .left-prizeaward {
  margin-top: 15px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}

.lottery-left .left-prizeaward .left-prizename {
  width: 240px;
  height: 64px;
  line-height: 74px;
  font-size: 22px;
  margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.left-joinnums {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}

.prize_number {
  width: 85%;
  margin: 0 auto;
  margin-top: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  font-size: 20px;
  background: rgba(114, 177, 174, 0.33);
  border-radius: 8px;

  .prize_number_l {
    color: #ffffff;
    padding-left: 5%;
  }

  .prize_number_r {
    padding-left: 6%;
  }

  .prize_refresh {
    margin-left: 9%;
  }

  .prize_number_btn {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }

  .prize_number_box {
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    background: rgba(114, 177, 174, 0);
    border: 0;
    text-align: center;
  }

  .prize_number_btn {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
}

.right-reward-foot {
  position: absolute;
  left: 40%;
  bottom: 3%;

  .start-btn {
    width: 220px;
    height: 68px;
    cursor: pointer;
    margin: 0 auto;
    background-image: url("../../assets/images/activity/start-btn.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}

.lottery-stop-btn {
  width: 308px;
  height: 98px;
  cursor: pointer;
  margin: 0 auto;
  margin-top: 10px;
  background-image: url("../../assets/images/activity/stop-btn.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.lottery-title {
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding: 2% 0 2% 0;
  height: 10%;
  .title-left {
    text-align: center;
    height: 80px;
    line-height: 80px;
    font-size: 48px;
  }
}

.right-reward-box {
  width: 90%;
  height: 75%;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  padding-top: 20px;
  margin-top: 2%;

  /deep/ .swiper-container {
    overflow: unset;
  }
}

.right-lucker {
  width: 160px;
  height: 160px;
  margin: auto 10px;
  font-size: 14px;
  color: #fff;
  position: relative;
  transition: all 0.35s;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  -o-transition: all 0.35s;
  text-align: center;
  float: left;
}

// 抽奖中多个人样式
.luck-more {
  width: 100px;
  height: 100px;
  margin: auto 10px;
}

.right-luckeravatar {
  position: relative;
  width: 7.65%;
  height: 80px;
  margin-top: 10px;

  // margin: 0 auto;
  &::after {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    /*no*/
    right: -1px;
    /*no*/
    bottom: 7px;
    /*no*/
    left: -1px;
    /*no*/
    border-top-right-radius: 50px;
    border-radius: 50%;
    background-image: linear-gradient(
      146deg,
      rgba(226, 247, 176, 0.5),
      rgba(236, 165, 48, 0.5)
    );
    z-index: -1;
  }
  img {
    width: 100%;
    border-radius: 50%;
  }
}

.right-one {
  width: 10%;

  &::after {
    content: "";
    display: block;
    position: absolute;
    /*no*/
    // top: -5px;
    // right: -3px;
    // bottom: 12px;
    // left: -5px;
    width: 100px;
    height: 100px;
    left: -5px /*no*/;
    top: -5px /*no*/;
    // border-top-right-radius: 50px;
    border-radius: 50%;
    background-image: linear-gradient(
      146deg,
      rgba(226, 247, 176, 0.5),
      rgba(236, 165, 48, 0.5)
    );
    z-index: -1;
  }
  img {
    width: 90px;
    border-radius: 50%;
  }
}

.right-luckeravatar .right-luckerdel {
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  line-height: 100px;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  color: #fff;
  cursor: pointer;
}

.right-luckeravatar .right-luckerdel:hover {
  opacity: 1;
}

.lottery-btn {
  margin-left: -6%;
  margin-top: 9%;
  .navbar-btn {
    width: 126px;
    height: 126px;

    img {
      width: 126px;
    }

    &:last-child {
      margin-top: 20px;
    }
  }
}

.right-luckeravatar img,
.lottery-userBox-avatar img,
.lottery-luckers-img img {
  background-color: #fff;
}

/**抽奖3d图形**/
.signthreed-wall-block {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-perspective: 1500px;
  left: 0;
  top: 0;
  pointer-events: none;
}

.signthreed-wall-block .wall3d {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.signthreed-wall-block .wall3d.hidden {
  display: none;
}

.wall3d ul {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /*border: 1px solid red;*/
}

.wall3d .card {
  position: absolute;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  top: 50%;
  left: 50%;
  display: none;
}

.wall3d .activate {
  display: block;
}

.wall3d ul li {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
}

.wall3d .casttc li {
  border-radius: 50%;
  overflow: hidden;
}

.wall3d ul li img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  -webkit-filter: brightness(1.1) opacity(0.9);
}

.audio_show {
  display: none;
}

.lottery-footer {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  background: rgba(0, 0, 0, 0.28);
  line-height: 66px;

  .footer-text {
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    height: 66px;
    color: rgba(255, 255, 255, 0.31);
  }
}

/**中间切换用户外框**/
.lottery-userBox {
  min-width: 60%;
  max-width: 80%;
  min-height: 60%;
  position: absolute;
  height: 70%;
  left: 0;
  top: 15%;
  z-index: 11;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  background-image: url("../../assets/images/activity/rightbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 16px;
  box-shadow: 7px 10px 40px #121212;
}

.lottery-userBox-wrapper {
  width: 85%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  flex-wrap: wrap;
}

.lottery-userBox-avatar.frotate {
  position: relative;
  // width: 150px;
  // height: 150px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 8px;
}

.lottery-userBox-avatar.frotate:after {
  content: "";
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  animation: foreverrotate linear infinite;
  animation-duration: 2s;
  background-image: url("https://sanrenxingvip.com/addons/meepo_xianchangv2/template/resource/images/screen/lottery/usercircle.png");
  background-size: 100% 100%;
}

@keyframes foreverrotate {
  0% {
    transform: rotate(0);
  }

  to {
    transform: rotate(-1turn);
  }
}

.lottery-userBox-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.lottery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
